<!-- 工作台 -->
<template>
  <el-container>
    <el-main>
      <el-card style="width: 100%; height: 400px">
        <template #header>
          <div>面板导航</div>
        </template>

        <div
          class="echarts"
          ref="echartsRef"
          style="width: 100%; height: 350px"
        />
      </el-card>

      <el-card>
        <template #header>
          <div>快速导航</div>
        </template>

        <div class="router-link-box">
          <router-link to="/article">文章管理</router-link>
          <router-link to="/comment">评论管理</router-link>
          <router-link to="/file">文件管理</router-link>
          <router-link to="/user">用户管理</router-link>
          <router-link to="/visit">访问管理</router-link>
          <router-link to="/set">系统设置</router-link>
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

const echartsRef = ref();

onMounted(() => {
  //初始化echarts实例init（ dom ，'主题' ，其余参数如：{ renderer:'svg' }）
  const myEcharts = echarts.init(echartsRef.value);
  //要操作的配置
  const option = {
    title: {
      text: "每周用户访问指标",
    },
    tooltip: {},
    legend: {
      //根据name决定展示顺序
      data: ["评论数", "访问量"],
    },
    xAxis: {
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {},
    series: [
      {
        name: "评论数",
        type: "bar", //bar为柱状图，pie为饼状图
        data: [5, 20, 36, 10, 10, 20],
      },
      {
        name: "访问量",
        type: "line", //bar为柱状图，pie为饼状图
        data: [
          6.0, 10.2, 10.3, 11.5, 10.3, 13.2, 14.3, 16.4, 18.0, 16.5, 12.0, 5.2,
        ],
      },
    ],
  };
  //设置配置
  myEcharts.setOption(option);
});
</script>

<style scoped lang="scss">
.router-link-box {
  display: flex;
  a {
    height: 30px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #000;
  }
}
</style>
